<template>
  <div class="home">
    <div class="padding10">
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img :src="image.banner_img" class="tupian" />
        </van-swipe-item>
      </van-swipe>

      <van-row gutter="0" class="home2">
        <van-col span="25" class="home_second">
          <div class="h_s_img" style="background-color: #ff9200">
            <img src="../../assets/icon/icon_lc.png" alt="" />
          </div>
          <div class="h_s_word">服务流程</div>
        </van-col>
        <van-col span="25" class="home_second">
          <div class="h_s_img" style="background-color: #11cfa7">
            <img src="../../assets/icon/icon_fw.png" alt="" />
          </div>
          <div class="h_s_word">服务范围</div>
        </van-col>
        <van-col span="25" class="home_second">
          <div class="h_s_img" style="background-color: #007eed">
            <img src="../../assets/icon/icon_lx.png" alt="" />
          </div>
          <div class="h_s_word">联系店长</div>
        </van-col>
        <van-col span="25" class="home_second">
          <div class="h_s_img" style="background-color: #6551ef">
            <img src="../../assets/icon/icon_bz.png" alt="" />
          </div>
          <div class="h_s_word">赔付标准</div>
        </van-col>
      </van-row>

      <div class="notice">
        <span class="tt">规则说明</span><span class="tt2">关于岭南洗衣所需要知道的一些事项及规则</span>
      </div>

      <van-row :gutter="10" class="help">
        <van-col span="40" class="help_child">
          <div class="hc_img">
            <img src="../../assets/icon/icon_yy.png" alt="" />
          </div>
          <div class="hc_detail" @click="goYu">
            <div>预约洗衣</div>
            <div class="color_gray">Appointment</div>
          </div>
        </van-col>
        <van-col span="40" class="help_child">
          <div class="hc_img">
            <img src="../../assets/icon/icon_kq.png" alt="" />
          </div>
          <div class="hc_detail" @click="gohong">
            <div>红包卡券</div>
            <div class="color_gray">Vouchers</div>
          </div>
        </van-col>
        <van-col span="40" class="help_child">
          <div class="hc_img">
            <img src="../../assets/icon/icon_cz.png" alt="" />
          </div>
          <div class="hc_detail">
            <div>会员充值</div>
            <div class="color_gray">Prepaid</div>
          </div>
        </van-col>
        <van-col span="40" class="help_child">
          <div class="hc_img">
            <img src="../../assets/icon/icon_yq.png" alt="" />
          </div>
          <div class="hc_detail">
            <div>邀请好友</div>
            <div class="color_gray">Invitation</div>
          </div>
        </van-col>
      </van-row>

      <div class="sec_title">
        <div>洗护项目</div>
        <div style="color: #2dafab">全部服务></div>
      </div>


      <!-- 类型区！！！ -->
      <div class="listhead" v-for="(item, index) in proList" :key="index">

        <div class="pro_top">

          <div class="protopimg"><img :src="item.type_img" alt=""></div>

          <div class="protop_right">

            <p class="shangming">{{ item.type_name }}</p>

            <div class="flex_r_b">
              <div style="margin-left: 10px">
                <img src="../../assets/icon/icon_index.png" mode="" class="clothimg" />
                <span style="color: #3cd492; font-size: 12px; font-weight: 700;
                    
                   ">{{ item.type_indr }}
                </span>
              </div>
              <div>
                <img src="../../assets/icon/icon_dw.png" mode="" class="pro_img_location" />
                <span style="font-size: 13px; color: #707070; font-weight: 600;
                    width: 50px;margin-right: 10px;">
                  心心店500m</span>
              </div>
            </div>

            <div class="flex_r_b">
              <div>
                <div class="right_word1">免费上门取货</div>
                <div style="font-size: 13px; margin-left: 10px; color: #707070;
                    margin-top: 10px; ">
                  已有{{ item.type_person_num }}人下单
                </div>
              </div>
              <div class="right_word2">更多分类>></div>
            </div>

          </div>
        </div>

        <div class="bot_word">
          <div class="bot_left">

            <span class="ziying">自营</span>
            <span class="diming">{{ item.type_name }}</span>
            <span class="qian"> {{ item.type_price }}</span>
          </div>

          <!-- //价格 -->

        </div>
      </div>
    </div>
  </div>




  <!-- 弹出层 -->
  <van-popup v-model:show="show" :overlay="false">
    <van-image v-if="adImg" width="200px" height="200px" :src="adImg" />
  </van-popup>
  <div class="van-popup__close" @click="show = false" v-if="show">x</div>
</template>



<script lang='ts' setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
// import { showDialog } from "vant";
import { gethttp } from "../../utils/request";

const adImg = ref<string | null>(null);
const router = useRouter();

//轮播    /api/banner
const images = ref([{ banner_img: '' }]);
const getAdImg = async () => {
  gethttp("/api/banner", 'get', null).then((res: any) => {
    if (res.status === 200) {
      images.value = res.data;
    }
  });
}

getAdImg();

const show = ref(false);


const proList: any = ref([

]);
// 类型接口    /api/category
const getListData = async (index: number) => {
  let res: any = await gethttp("/api/category", "get", { type_n: index });
  console.log(res.data)
  res.data.forEach((item: any) => {
    item.type_num = 0;
    let n: number = 0;

  });


  proList.value = res.data;
};


// getListData();

const showPopup = () => {
  try {
    show.value = true;
  } catch (error) {
    console.error("显示弹出层时发生错误:", error);
  }
};

const closePopup = () => {
  try {
    show.value = false;
  } catch (error) {
    console.error("关闭弹出层时发生错误:", error);
  }
};

const popupStyle = {
  padding: "64px",
};
const goYu = () => {
  router.push("/category")
};

const gohong = () => {
  router.push("/redbag")
};

onMounted(() => {
  const hasShownAd = sessionStorage.getItem("adShown");
  if (hasShownAd) {
    show.value = false;
  } else {
    try {
      adImg.value = new URL("@/assets/img/adv.png", import.meta.url).href;
      show.value = true;
      sessionStorage.setItem("adShown", "true");
    } catch (error) {
      console.error("广告图片路径错误：", error);
      adImg.value = null;
    }
  }
});




</script>
<style>
.van-tabbar__placeholder{
  width: 100px;
}
</style>
<style lang="less" scoped>
/deep/.van-tabbar__placeholder{
  width: 0px;
}
.color_gray {
  color: gray;
  font-weight: small;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  height: 350px;
  width: 730px;
}

.tupian {
  width: 100%;
  height: 450px;
  background-color: #f5f5f5;
  border-radius: 20px;
}

.tu {
  width: 300px;
  height: 300px;
  // border-radius: 50%;
  margin: 0 auto;

}

.bot_right {
  color: red;
  font-weight: 600;
  font-size: 30px;
  margin-top: 260px;
  margin-left: 580px;
}

.xianshi {
  margin-left: 20px;
  color: black;
  font-size: 20px;
}

.home {
  width: 100vw;
  height: 100vh;
  background-color: #f5f5f5;


  .padding10 {
    padding: 10px;

    .home2 {
      margin-top: 20px;

      .home_second {
        width: 21%;
        margin: 0 2%;
        height: 180px;
      }

      .h_s_img {
        width: 70%;
        height: 60%;
        text-align: center;
        margin: 0 auto;
        border-radius: 20px;

        img {
          width: 60%;
          height: 60%;
          margin: 20% 20%;
        }
      }

      .h_s_word {
        margin-top: 5px;
        font-size: 30px;
        text-align: center;
      }
    }

    .bot_left {
      position: absolute;


      img {
        width: 600px;
        height: 220px;
        text-align: center;
        line-height: 200px;
        font-size: 20px;
        color: #999;
      }

      .ziying {
        margin-top: 10px;
        margin-left: 10px;
        height: 30px;
        width: 45px;
        border-radius: 0 10px 0 10px;
        font-size: 26px;
        padding: 3px;
        background-color: red;
        color: #fff;
      }

      .qian {
        color: red;
      margin-left: 550px;
        font-size: 40px;
        display: block;
        text-align: right;
        margin-top: -40px;
      }

      .diming {
        font-size: small;
        line-height: 17px;
        margin-left: 5px;

      }
    }

    .notice {
      margin-top: 10px;
      font-size: 25px;
      background-color: #f2faf9;
      text-align: center;

      .tt {
        padding: 5px 30px;
        background-color: #03a19c;
        color: #fff;
        border-radius: 20px;
      }

      .tt2 {
        padding: 5px 30px;
      }
    }

    .help {
      margin-top: 30px;

      .help_child {
        background-color: #fff;
        width: 48%;
        height: 150px;
        margin: 1% 1%;
        display: flex;
        justify-content: space-between;
        padding: 40px 60px;
        border-radius: 20px;

        .hc_img {
          width: 30%;
          height: 100%;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .hc_detail {
          font-size: 25px;
          text-align: left;
          width: 140px;
          text-align: left;
        }
      }
    }

    .sec_title {
      display: flex;
      justify-content: space-between;
      margin: 30px 10px 0px 10px;
      font-size: 27px;
    }

    .listhead {
      width: 100%;
      height: 300px;
      background-color: #fff;
      border-radius: 15px;
      margin-top: 20px;

      .headimg {
        width: 94%;
        height: 75%;
        padding: 3% 3% 0 3%;
      }

      .bot_word {
        padding-left: 3%;
        padding-right: 3%;
        line-height: 30px;
        width: 100%;
      }

      .pro_top {
        width: 94%;
        height: 75%;
        padding: 3% 3% 1% 3%;
        display: flex;

        img {
          width: 200px;
          height: 200px;
          border-radius: 30px;
          // .pro_li {
          //   width: 100%;
          //   height: 100%;
          //   border-radius: 30px;
          // }
        }

        .flex_r_b {
          display: flex;
          justify-content: space-between;
          width: 500px;

          .luzi {
            margin-top: -20px;
          }

          .clothimg {
            width: 50px;
            height: 50px;
            margin-bottom: -20px;
          }

          .pro_img_location {
            width: 30px;
            height: 30px;

          }
        }

        .protop_right {
          width:300px ;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          
        }

        .shangming {

          font-weight: 700;

          margin-left: 20px;
        }

        .right_word1 {
          margin-left: 10px;
          text-align: center;
          padding: 0px 3px 0px 3px;
          font-size: 22px;
          border: 2px solid #3fa19d;
          border-radius: 7px;
          color: #3fa19d;
          font-weight: 600;

        }

        .right_word2 {
          background-color: #3fa19d;
          color: #fff;
          height: 30px;
          padding: 3px 10px;
          text-align: center;
          font-size: 22px;
          border-radius: 7px;
          margin-right: 20px;
         
        }
      }
    }
  }
}

.van-popup__close {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  color: #fff;
  font-size: 20px;
  padding: 8px;
  border-radius: 50%;

  top: 68%;
  left: 50%;
  transform: translate(-68%, -50%);
}
</style>